
import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import HeaderTitle from "../login/header";
import style from "./index.module.less"
import  "./index.css"

import { EyeInvisibleOutline, EyeOutline ,CheckCircleOutline,CloseCircleOutline} from "antd-mobile-icons"
import React, { Fragment, useState, useEffect } from 'react'
import {
	Form,
	Input,
	Checkbox,
	Button,
	Toast,
	Radio,
} from 'antd-mobile'
import { message } from "antd";
import { getinfo,getbanks ,pay_usdt,recharge_config,gettixianactivity} from "@/apis/user.js"

import zsk from '../../static/ksdkw.png'
import zsk1 from '../../static/TW_1_20230531025717930.png'
import usdt from '../../static/icon-usdt-shield.png'
import ms from '../../static/icon-cvs-pay.png'
import right from '../../static/right.png'
import zzz from '../../static/1705383779528.jpg'
import ccc from '../../static/recommend.23491235.png'
import ddd from '../../static/786_CN_1.png'
import a05 from '../../static/05.png'
import a06 from '../../static/06.png'

const TIME = 60000; //定义时效性


const DongTai = (props) => {
	const { t } = useTranslation();
	const navigate = useNavigate()
	const [active, serActive] = useState(3);
	const [price, sePrice] = useState('');
	const [name, setName] = useState('');
	const [visible, setVisible] = useState(false)
	const [info, setInfo] = useState([]);
	const [amount, setamount] = useState(0);
	const [fanli, setfanli] = useState(0);
	const [xiaoshu, setxiaoshu] = useState(0);
	const [paytype, setpaytype] = useState('bank');
	const [type, settype] = useState(3);
	const [bank_id, setbank_id] = useState('');
	const [bank_name,setbank_name] = useState('');
	const [value, setValue] = useState('0');
	const [config, setConfig] = useState({zuishaochongzhi:''});
	const [items, setItems] = useState([
		[
			{ id: 1, label: t('rechargeorder.title2'), amount: 100 },
			{ id: 2, label: t('rechargeorder.title3'), amount: 200 },
			{ id: 3, label: t('rechargeorder.title4'), amount: 500 },
			{ id: 4, label: t('rechargeorder.title2'), amount: 1000 },
		],
		[
			{ id: 5, label: t('rechargeorder.title3'), amount: 2000 },
			{ id: 6, label: t('rechargeorder.title4'), amount: 5000 },
			{ id: 7, label: t('rechargeorder.title2'), amount: 10000 },
			{ id: 8, label: t('rechargeorder.title3'), amount: 50000 },
		]
		
		// Add more items as needed
	]);
	const [activity,setactivity] = useState([]);
	
	useEffect(() => {
			setTimeout(()=>{
				if (window.scrollTo) {
					window.scrollTo(0, 0);
				} else if (document.body.scrollTop) {
					document.body.scrollTop = 0;
				} else {
					document.documentElement.scrollTop = 0;
				}
				document.getElementById('root').scrollIntoView(true);
				document.getElementById('body').scrollIntoView(true);
			},0)

			if(!localStorage.getItem('login') || localStorage.getItem('login') == null || localStorage.getItem('login') == undefined || localStorage.getItem('login') == ''){
				navigate('/login')
				message.error(t('login.title52'))
				return
			}
		getinfo().then(res => {
			if (res.status.errorCode == 0) {
				setInfo(res.data)
			}
		})
		getbanks().then(res => {
			setItems(res.data)
			setbank_id(res.data[0].id)
			setbank_name(res.data[0].bank_code)
		})
		recharge_config().then(res => {
			setConfig(res.data)
		})
		//setxiaoshu((Math.floor(Math.random() * 900) + 100) / 1000)
		// setFlag(true);
		return ()=>{console.log('初始化----个人中心')}
	}, []);
	
	const changeTab = (current) => {
		if(current != type) setactivity([])
		console.log('current:', current);
		serActive(current) //更新 active 状态
		settype(current) //更新 active 状态
		setValue('0')
	}
	useEffect(()=>{
	
		let num = 0
		if(type == 3 ){
			num = 1
		}
		if(type == 1 ){
			num = 2
		}
		if(type == 2 ){
			num = 3
		}
		gettixianactivity({type:num}).then(res=>{
			setactivity(res.data)
		})
	},[type])
 
	const select=(id,money)=>{
		console.log(id,money)
		sePrice(money)
	}
	const changenamme = (e) =>{
		setName(name+e.target.value)
	}
const selectFun = (e)=>{
	setbank_id(e.target.value.id)
	setbank_name(e.target.value.bank_code)
}
useEffect(() => {
    if (active === 1) {
      setpaytype("bank");
    } else if (active === 2) {
      setpaytype("usdt");
    } else {
      setpaytype("usdt");
    }
  }, [active]);
  const setInput = (e)=>{
	if(active == 2){
		if(e.target.value == '' || e.target.value == 0){
			setxiaoshu(0)
		}else{
			setxiaoshu((Math.floor(Math.random() * 900) + 100) / 1000)
		}
	}else{
		setxiaoshu(0)
	}
  }
  const setInputOn = (e)=>{
	if(active == 2){
		if(e.target.value == '' || e.target.value == 0){
			setxiaoshu(0)
		}else{
			setxiaoshu((Math.floor(Math.random() * 900) + 100) / 1000)
		}
	}else{
		setxiaoshu(0)
	}
  }
const submit = (e)=>{
	if(amount  <= 0){
		Toast.show({
			content: t('rechargeorder.title5'),
		})
		return
	}
	if(amount  < parseInt(config.zuishaochongzhi) || amount  > parseInt(config.zuidachongzhi)){
		Toast.show({
			content: t('rechargeorder.title12') + config.zuishaochongzhi + t('rechargeorder.title120') + config.zuidachongzhi,
		})
		return
	}
	let data = {
		amount:amount*1
		,fanli,
		bank_id,xiaoshu,
		bank_id,paytype,
		fanli:value,
		active,
		bank_name,
		xxx:(amount / config.usdt_lv + xiaoshu).toFixed(3)
	}
	if(active == 3 ){
		data.paytype = ''
	}
	localStorage.setItem('chongzhidata',JSON.stringify(data))
	navigate('/rechargerecordetail')
}
const setInputAm = (e)=>{
	console.log(e)
	const newValue = e.target.value;
    const numericRegex = /^[0-9]*$/;
    const newValueIsNumeric = numericRegex.test(newValue);
 
    if (newValueIsNumeric) {
		setamount(e.target.value)
    }
	
}
	return (
		<React.Fragment>
			<HeaderTitle title={t('rechargeorder.title1')} right_title={t('agent.title2')} />
			<div className={style['login_box']}>

				{/* <div className={`${style['tabs']}`} onClick={() => {
					changeTab(1)
				}}>
					一键回收
				</div> */}
				
				<div className={style['flex']} style={{ backgroundColor: '#fff', padding: '10px' }}>
					<div className={style['flex']}>
						{/* <div className={style['left_label']}></div> */}
						<div className="title title10" style={{ letterSpacing: '1px' }}>{t('rechargeorder.title6')}</div>
					</div>
					{/* <div className={style['flex']} style={{ marginLeft: '20px', fontSize: '12px', color: '#9d7201', visibility: 'hidden' }}>
						<input type="text" className={style['input']} placeholder="100-50000元" />
					</div> */}
				</div>
				
				<div className={style['operation3']} style={{marginBottom:'0'}}>
					{/* {[style['tabs'], style['active']].join(' ')} */}
					<div className={`${style['tabs'],'liui'} ${active === 3 ? 'active' : ''}`} onClick={()=>{
						changeTab(3)
					}}>
													{
							active == 3 && (
								<>
								<img src={ccc} alt=""    className="img3"/>
								<img src={zzz} alt=""     className="img1"/>
								</>
							)
							}
						
						<img src={zsk} alt="" className="img2" style={{ width: '25px', marginBottom: '5px' }} />
						{t('deposit.title5')}
					</div>
					<div className={`${style['tabs'],'liui'} ${active === 1 ? 'active' : ''}`} onClick={() => {
						changeTab(1)
					}}>
							{
							active == 1 && (
								<>
								<img src={ccc} alt="" className="img3" />
								<img src={zzz} alt="" hidden={active === 2} className="img1" />
								</>
							)
							}
						

						<img src={zsk1} alt="" className="img2" style={{ width: '25px', marginBottom: '5px' }} />
						{t('rechargeorder.title7')}
					    
					</div>
					<div className={`${style['tabs'],'liui'} ${active === 2 ? 'active' : ''}`} onClick={()=>{
						changeTab(2)
					}}>
													{
							active == 2 && (
								<>
								<img src={ccc} alt=""    className="img3"/>
								<img src={zzz} alt=""     className="img1"/>
								</>
							)
							}
						
						<img src={ddd} alt="" className="img2" style={{ width: '25px', marginBottom: '5px' }} />
						{t('rechargeorder.title8')}
					
					</div>

				</div>
				<div hidden={active == 1 || active == 3} style={{background:'#fff',paddingBottom:'10px',paddingLeft:'10px',paddingRight:'10px',color: '#ec2529',
	fontSize: '14px',
	  }}> <div className="wysiwyg mb16">{t('rechargeorder.title9')}</div>
	  </div>
						{/*<div hidden={active == 1} style={{borderTop:'5px solid #ececec', background:'#fff',paddingBottom:'10px',paddingTop:'10px',paddingLeft:'10px',paddingRight:'10px',color: '#ec2529',
	fontSize: '14px',
	  }}> <div className="wysiwyg mb16">{t('rechargeorder.title10')}</div></div> */}
			

				{/*<div className={style['flex']} style={{ backgroundColor: '#fff', padding: '10px' }}>
					<div className={style['flex']}>
						 <div className={style['left_label']}></div>
						<div style={{ letterSpacing: '1px' }}>充值渠道</div>
					</div>
					<div className={style['flex']} style={{ marginLeft: '20px', fontSize: '12px', color: '#9d7201', visibility: 'hidden' }}>
						<input type="text" className={style['input']} placeholder="100-50000元" />
					</div>
				</div> */}
				
				{/* <div className={style['operation3']}>
					{[style['tabs'], style['active']].join(' ')} 
				
					<div className={`${style['tabs']} ${active === 1 ? style['active'] : ''}`} onClick={() => {
						changeTab(1)
					}}>
						<img src={zsk} alt="" style={{ width: '30px', marginBottom: '5px' }} />
						轉數快
					</div>
					<div className={`${style['tabs']} ${active === 2 ? style['active'] : ''}`} onClick={()=>{
						changeTab(2)
					}}>
						2
					</div>
				</div>*/}
				{/* <div className={style['flex']} style={{ backgroundColor: '#fff', padding: '10px', borderBottom: '1px solid #E1E1E1' }}>
					<div className={style['flex']}>
					 
						<div style={{ letterSpacing: '1px' }}>存款人姓名</div>
					</div>
					<div className={style['flex']} style={{ marginLeft: '20px', fontSize: '12px', color: '#9d7201' }}>
						<input type="text" className={style['input']} placeholder="存款人姓名" defaultValue={name} onChange={changenamme}/>
					</div>
				</div>
				<div className={style['flex']} style={{ backgroundColor: '#fff', padding: '10px' }}>
					<div className={style['flex']}>
					 
						<div style={{ letterSpacing: '1px' }}>充值金額</div>
					</div>
					<div className={style['flex']} style={{ marginLeft: '20px', fontSize: '12px', color: '#9d7201' }}>
						<input type="text" className={style['input']} placeholder="100-50000元" defaultValue={price}/>
					</div>
				</div> */}


				 

				<div className="a1"></div>
				<div   style={{ backgroundColor: '#fff', padding: '10px' }}>
					<div className={style['flex']}>
						{/* <div className={style['left_label']}></div> onInput={setInput} */}
						<div className="title tit3" style={{ letterSpacing: '1px' }}>{t('rechargeorder.title11')}</div>
					</div>
					<div className={style['flex']} style={{ marginLeft: '0px', fontSize: '12px', color: '#9d7201', flex:'1'}}>
						<input type="tel" onInput={setInputOn} onChange={(e)=>setInputAm(e)} style={{border: '1px solid #ec2529',borderRadius:'5px',paddingLeft:'10px'}}  className={style['input']} placeholder={t('rechargeorder.title12') + config.zuishaochongzhi} />
					</div>
					<div className="t1 mb16" >
						{t('rechargeorder.title12')}
						{config.zuishaochongzhi}
						{t('rechargeorder.title120')}
						{config.zuidachongzhi}
						</div>
					{
						active == 2 && (
							<div className="bank-virtual-tips mb16">
									<span style={{fontSize:'22px'}}>{(amount / config.usdt_lv + xiaoshu).toFixed(3)} </span>USDT
								<div className="m01">
								{t('rechargeorder.title13')}
									<span style={{fontSize:'22px'}}>1 USDT  =  ¥ {config.usdt_lv}</span>
								</div>
							</div>
						)
					}

				</div>
				{

				active == 1 ? 
				<div   style={{ backgroundColor: '#fff', padding: '10px',borderTop:'5px solid #ececec' }}>
					<div className={style['tablebadyul']}>

							<div className="title tit4">{t('rechargeorder.title14')}</div>	
								<select onChange={selectFun} style={{width:'100%',marginTop:'10px',height:'35px',border: '1px solid #ec2529',borderRadius:'5px'}}>
									{
									items && items.map((item,index)=>{
										return (
											<option key={index} value={item}>{item.bank_code}</option>
										)
									})
								}
								</select>
					</div>
				</div> : ''
				}

				
				{/* <div className={style['content1']} style={{color:'#1E901E'}}>

					* 轉賬時請將我方收款銀行，設為轉數快預設收款銀行，如因設置不正確導致轉賬錯誤，本公司一概不承擔。

				</div>

				<div className={style['content1']} style={{color:'#DF6262'}}>

				* 首沖即送20%,充￥1000送200，系統根據最新一筆充值金額審核優惠申請。

				</div>
				<div className={style['content1']} style={{color:'#B2B3B4'}}>

				* 轉速快小數點後兩位為系統配發的隨機數，轉賬時清準確輸入系統配發的金額，以免造成延誤或損失。

				</div> */}


				<div className="a1"></div>
				<Radio.Group
				value={value}
				onChange={val => {
					setValue(val)
				}}
        >
				<div  style={{ backgroundColor: '#fff', padding: '10px',paddingBottom: '20vw' }}>
					<div className={style['flex']}>
						<div className="title tit3" style={{ letterSpacing: '1px' }}>{t('rechargeorder.title15')}</div>
					</div>
					{activity.length > 0 && (
						activity.map((item,index)=>{
						return (
							<div className="check" key={index} style={{ marginLeft: '0px', fontSize: '12px', color: 'rgb(41, 128, 185)', flex:'1'}}>
								{/* <input type="checkbox" />	   */}
								<Radio
								  value={item.id}
								  style={{
									'--icon-size': '18px',
									'--font-size': '14px',
									'--gap': '10px',
								  }}
								  icon={checked =>
									checked ? (
									  <img src={a05} alt="" className="img006" />
									) : (
									  <img src={a06} alt="" className="img006" />
									)
								  }
								>
								{item.title} 
								</Radio>
							</div>
						);
						})
					)}
					<div  className="check" style={{ marginLeft: '0px', fontSize: '12px', color: 'rgb(41, 128, 185)', flex:'1'}}>
						{/* <input type="checkbox" />	 */}
						<Radio
						value='0'
						style={{
							'--icon-size': '18px',
							'--font-size': '14px',
							'--gap': '10px',
						  }}
						icon={checked =>
							checked ? (
							<img src={a05} alt="" className="img006" />
							) : (
							<img src={a06} alt="" className="img006" />
							)
						}
						>
					{t('rechargeorder.title19')}
						</Radio>
					</div>
			
				</div>
</Radio.Group>
				<div className={style['btns']} onClick={submit}>{t('rechargeorder.title20')}</div>










			</div>


		</React.Fragment>


	)
}


export default DongTai
